<template>
    <!-- <div class="basic-component"> -->
        <!-- <el-row class="component-row"> -->
            <el-col :span="parseInt(item.attribute.spanNum.value)">
                <!-- <el-form ref="form" :model="list" label-width="100px">
                    <template>
                        <el-form-item label="Activity zone">
                            <el-select v-model="form.region" placeholder="please select your zone">
                                <el-option label="Zone one" value="shanghai"></el-option>
                                <el-option label="Zone two" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </el-form> -->
                <!-- <div class="ceshi" v-html="html"></div> -->
                <div class="form-item flex">
                   <label class="form-label">{{item.name}}:</label>
                    <!-- 单行文本 -->
                    <el-input v-if="item.type === 'textSingle'" v-model="value" :placeholder="item.attribute.placeholder.value" />
                    <!-- 多行文本 -->
                    <el-input v-else-if="item.type === 'textArea'" v-model="value" :autosize="{minRows: item.attribute.minRow.value, maxRows: item.attribute.maxRow.value}"
                        type="textarea" :placeholder="item.attribute.placeholder.value" />
                    <!-- 密码框 -->
                    <el-input v-else-if="item.type === 'password'" show-password v-model="value" :placeholder="item.attribute.placeholder.value" />
                    <!-- 数字输入框 -->
                    <el-input-number v-else-if="item.type === 'number'" v-model="value" />
                    <!-- 选择框 -->
                    <el-select v-else-if="item.type === 'select'" v-model="value" :placeholder="item.attribute.placeholder.value">
                        <el-option v-for="item in item.attribute.data.extendData" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- 级联选择器 -->
                    <el-cascader v-else-if="item.type === 'cascader'" v-model="value" :options="item.attribute.data.extendData"
                        :props="{ expandTrigger: 'hover' }"></el-cascader>
                    <!-- 单选框组 -->
                    <el-radio-group v-else-if="item.type === 'radioGroup'" v-model="value">
                        <template v-for="(radio, rIndex) in item.attribute.data.extendData" :key="rIndex">
                            <el-radio :label="radio.value">{{radio.label}}</el-radio>
                        </template>
                    </el-radio-group>
                    <el-checkbox-group v-else-if="item.type === 'checkboxGroup'" v-model="value">
                        <template v-for="(check, checkIndex) in item.attribute.data.extendData" :key="checkIndex">
                            <el-checkbox :label="check.value">{{check.label}}</el-checkbox>
                        </template>
                    </el-checkbox-group>
                </div>
            </el-col>
        <!-- </el-row> -->
    <!-- </div> -->
</template>

<script>
    import {
        ref
    } from 'vue';
    export default {
        props: ['item'],
        setup(props) {
            let value = ref('');
            console.log(props)
            return {
                value
            }
        },
        data() {
            return {}
        },
        watch: {
            item: {
                handler(v) {
                  console.log('jjj', v)
                    this.$forceUpdate();
                },
                deep: true,
                immediate: true
            },
            'item.attribute.defaultValue': {
                handler(v) {
                    if (v !== undefined) {
                        this.value = v.value;
                    }
                },
                immediate: true,
                deep: true
            },
            value: {
                handler(v) {
                    this.$emit('changeValue', v);
                },
                deep: true
            }
        },
        mounted() {
          // this.html = handlerComponentConfig(componentConfig.list);
        }
    }
</script>

<style scope lang="less">
  .basic-component {
    .component-row {
      width: auto;
    }
  }
  .form-item {
    margin: 5px 0;
  }
</style>
